<template>
  <div class="product-list-outer" :style="{width:currWidth+'px'}"
       :class="(($props.showType===0 || $props.showType===3 || $props.showType===5) || !$props.showType)?'product-list-item':'product-list-item1'"
       v-loading="loading">

    <template v-if="!$props.currProduct.name || $props.currProduct.name.length===0">
      <span style="color: darkred">╭(╯^╰)╮ 无商品信息...</span>
    </template>

    <template
      v-if="(($props.showType===0 || $props.showType===3) || !$props.showType) && $props.currProduct.name && $props.currProduct.name.length>0">
      <img class="product-list-item-image"
           @click="getDetail"
           :src="$props.currProduct.image"
           :alt="$props.currProduct.name">
      <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)"></div>
      <div class="product-list-item-price-box">
        <div class="product-list-item-price" v-text="'￥'+ToMoney($props.currProduct.price)"></div>
        <div class="product-list-item-buynow">
          <template v-if="$props.showType===0">
            <el-tooltip v-if="!$props.currProduct.isMoreModel" placement="top" :hide-after="2000"
                        :visible-arrow="false">
              <div slot="content">+1</div>
              <!--              <button type="warning" size="mini" @click="addCart"> 加入购物车</button>-->
              <button class="iconfont icon-gouwuchekong" @click="addCart"></button>
            </el-tooltip>
            <button v-if="$props.currProduct.isMoreModel" class="iconfont icon-gouwuchekong" @click="addCart"></button>
            <!--            <button type="primary" size="mini">购买</button>-->
          </template>
          <button type="primary" v-if="$props.showType===3" size="mini" @click="cancelCollect">取消收藏</button>
        </div>
        <div class="c"></div>
      </div>
      <div class="product-list-item-seconds-price"
           v-if="$props.currProduct.secondPrice && $props.currProduct.secondPrice>0">抢购中
      </div>
    </template>

    <template
      v-if="$props.showType===5 && $props.currProduct.name.length>0">
      <img class="product-list-item-image"
           @click="getStockDetail"
           :src="$props.currProduct.image"
           :alt="$props.currProduct.name">
      <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)" :style="{
            maxWidth:Math.ceil((this.getWinSize().width-65)*0.75)+'px'
          }"></div>
      <div class="product-list-item-model">
         <span style="display: inline-block; position: relative; top: 0px;" class="model-span ovd_s" v-text="'型号: '+$props.currProduct.model" :style="{
            maxWidth:Math.ceil((this.getWinSize().width*0.5)-53)+'px'
          }"></span>
      </div>
      <div class="product-list-item-price-box" style="padding-top: 3px;">
        <div class="product-list-item-price" style="text-align: center;">
          <span v-text="'￥'+ToMoney($props.currProduct.price)"></span>
        </div>
        <div class="product-list-item-buynow">
          <span style="font-size: 12px; color: #e88124;" v-text="'所需积分: '+$props.currProduct.score"> </span>
        </div>
        <div class="c"></div>
      </div>
      <div align="center">
        <el-button
          style="bottom: 25px; z-index: 999; right: 5px; height: 20px; width: 98%; padding: 5px 8px; padding-top: 3px"
          type="primary" size="mini" @click="scoreExchangeAndBuy">立即兑换
        </el-button>
      </div>
    </template>

    <template
      v-if="($props.showType===1 || $props.showType===2) && $props.currProduct.name && $props.currProduct.name.length>0">
      <img class="product-list-item-image" @click="getDetail" :src="$props.currProduct.image?$props.currProduct.image:$props.currProduct.shopProductImage"
           :alt="$props.currProduct.name">
      <div class="right-info" :class="'right-info-'+$props.showType">
        <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)" :style="{
            maxWidth:Math.ceil((this.getWinSize().width-65)*0.75)+'px'
          }"></div>
        <div class="product-list-item-model">
          <div class="item">
            <span class="model-title">型号:</span> <span class="model-span ovd_s" v-text="$props.currProduct.model"  @click="chooseModel" :style="{
            maxWidth:Math.ceil((this.getWinSize().width-105)*0.65)+'px'
          }"></span>
          </div>
<!--          <div class="item" v-if="$props.currProduct.score>0 && $props.showType===1">-->
<!--            积分:-->
<!--            <el-tag type="success" style="text-indent: 0px"-->
<!--                    v-text="($props.currProduct.score*nums).toFixed(0)"></el-tag>-->
<!--          </div>-->
        </div>
        <div class="product-list-item-price" :style="{
          width:(Math.ceil(getWinSize().width*0.98)-80)+'px'
        }">
          <span class="product-one-price" v-text="ToMoney($props.currProduct.price)"></span>
          ×
          <el-input-number class="my-input" :disabled="$props.onlyRead===1" controls-position="right" v-if="$props.showType===1"
                           v-model="nums"
                           @change="changeNums"
                           :min="1"
                           :max="999"></el-input-number>
          <span class="product-one-nums" v-if="$props.showType===2" v-text="$props.currProduct.nums"></span>
          &nbsp;=&nbsp; <span class="product-one-total-price"
                              v-text="ToMoney($props.currProduct.nums*$props.currProduct.price)"></span>
        </div>
      </div>
      <div class="c"></div>
    </template>


    <template
      v-if="$props.showType===4 && $props.currProduct.name && $props.currProduct.name.length>0">
      <img class="product-list-item-image" @click="getDetail" :src="$props.currProduct.image"
           :alt="$props.currProduct.name">
      <div class="right-info" :class="'right-info-'+$props.showType">
        <!--        <div class="apply-box" v-if="$props.orderStatus && $props.orderStatus===3">-->
        <!--          <el-button type="primary" @click="applySubmit()" v-if="$props.currProduct.applyId===0">退换货</el-button>-->
        <!--          <el-button type="primary" @click="applySubmit('show')" v-if="$props.currProduct.applyId>0">查看退换货</el-button>-->
        <!--        </div>-->
        <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)" :style="{
            maxWidth:Math.ceil((this.getWinSize().width-65)*0.75)+'px'
          }"></div>
        <div class="product-list-item-model">
           <span class="model-span ovd_s" v-text="'型号: '+$props.currProduct.model" :style="{
            maxWidth:Math.ceil((this.getWinSize().width-105)*0.65)+'px'
          }"></span>

        </div>
        <div class="product-list-item-price" v-if="$props.showType!==4">
          <span class="product-one-price" v-text="ToMoney($props.currProduct.price)"></span>
          ×
          <el-input-number class="my-input" :disabled="$props.onlyRead && $props.onlyRead===1" controls-position="right"
                           v-if="$props.showType===1"
                           v-model="nums"
                           @change="changeNums"
                           :min="1"
                           :max="999"></el-input-number>
          &nbsp;=&nbsp; <span class="product-one-total-price"
                              v-text="ToMoney($props.currProduct.nums*$props.currProduct.price)"></span>
        </div>

        <div class="product-list-item-price1" v-if="$props.showType===4">
          <div class="item" v-text="ToMoney($props.currProduct.price)"></div>
          <div class="item item-05 item-price">×</div>
          <div class="item" v-text="$props.currProduct.nums"></div>
          <div class="item item-05">&nbsp;=&nbsp;</div>
          <div class="item item-price"
               v-text="ToMoney($props.currProduct.nums*$props.currProduct.price)"></div>
        </div>
      </div>
      <div class="c"></div>
    </template>


  </div>
</template>

<script>
import CartTools from '../tools/CartTools'

export default {
  name: 'ProductListItem',
  props: {
    onlyRead: Number,
    showType: Number,
    confirmOrderCallBack: Function,
    orderStatus: Number,
    currProduct: Object,
    changeCallBack: Function,
    currIndex: Number,
    chooseModelCallBack: Function
  },
  data: function () {
    return {
      nums: 0,
      currWidth: '100%',
      loading: false,
      showAddSuccessTip: false
    }
  },
  beforeMount () {
    if (!(this.$props.showType === 4 || this.$props.showType === 2 || this.$props.showType === 1)) {
      this.currWidth = (this.getWinSize().width / 2) - 10
    }
    this.nums = this.$props.currProduct.nums
    // console.log('currWidth',this.currWidth)
  },
  methods: {
    chooseModel:function () {
      this.$props.chooseModelCallBack(this.$props.currProduct,this.$props.currIndex)
    },
    /*     applySubmit:function (type) {
          var productData={
            orderProductId:this.$props.currProduct.orderProductId,
            id:this.$props.currProduct.id,
            name:this.$props.currProduct.name,
            image:this.$props.currProduct.image,
            model:this.$props.currProduct.model,
            nums:this.$props.currProduct.nums,
            price:this.$props.currProduct.price,
          }
          if (type==='show'){
            productData.applyId=this.$props.currProduct.applyId
          }
          productData.allPrice=(productData.price*productData.nums).toFixed(2)
          this.$router.push({
            name:'OrderApply',
            query:{
              productData:encodeURI(JSON.stringify(productData))
            }
          })
        }, */
    getProductName: function (productName) {
      var winSize = this.getWinSize()
      var fontLength = Math.ceil(this.currWidth / 13) * 2 - 1
      if (productName.length > fontLength) {
        return productName.substring(0, fontLength) + '...'
      } else {
        return productName
      }
    },
    getNums: function () {
      return this.nums
    },
    addCart: function () {
      let $this = this
      // console.log('$this.currProduct',$this.currProduct)
      $this.checkLoginAct(function () {
        $this.bus.$emit('AddCartProductModelDialogCallBus', $this.currProduct.id, $this.currProduct.shopProductStockModel)
      })
    },
    getDetail: function (data) {
      var query = {id: this.$props.currProduct.id}
      if (this.$props.currProduct.shopProductId){
        query.id=this.$props.currProduct.shopProductId
      }
      if (this.$props.currProduct.model) {
        query.model = this.$props.currProduct.model
      }
      this.$router.push({
        name: 'ProductDetail',
        query: query
      })
    },
    getStockDetail: function (data) {
      this.$router.push({
        name: 'ProductDetail',
        query: {
          id: this.$props.currProduct.shopProductId,
          model: this.$props.currProduct.model
        }
      })
    },
    changeNums: function () {
      this.$props.changeCallBack(this.nums)
    },
    scoreExchangeAndBuy: function () {
      this.$props.confirmOrderCallBack(this.$props.currProduct)
    },
    cancelCollect: function () {
      let $this = this
      $this.loading = true
      $this.MyRequest($this.ApiDoNameMember + 'Member/collectProduct', {
        id: $this.$props.currProduct.id,
      }, function (data) {
        $this.loading = false
        $this.$props.changeCallBack()
        $this.$forceUpdate()
      }, function (msg) {
        $this.loading = false
        $this.$message.error(msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
